import { loginAction } from '@/store/action/login'
import { Card, Form, Input, Button, Checkbox, message } from 'antd'
import { useDispatch } from 'react-redux'
import { useLocation } from 'react-router-dom'
import { useHistory } from 'react-router-dom'
import logo from '../../assets/logo.png'
import './index.scss'

const Login = () => {
  // 表单提交=》校验通过 =》执行
  /**
   *
   * @param {*} formData 表单数据
   */
  const dispatch = useDispatch()
  const hs = useHistory()
  // 获取state参数
  const location = useLocation()
  console.log('参数：', location)
  const onFinish = async formData => {
    console.log('Success:', formData)
    /**
     * 流程：
     * 1. 定义异步action函数=》发请求获取token，存到redux
     * 2. 使用dispatch(异步action函数(formData))
     */
    try {
      await dispatch(loginAction(formData))
      message.success('登录成功')
      // 如果存在上次页面地址，就跳转上次页面；相反，跳回首页
      hs.replace(location.state?.from || '/home')
    } catch (error) {
      // console.dir(error)
      // console.log(error.response.data.message)
      message.error(error.response.data.message)
    }
  }

  // 自定义函数校验
  /**
   *
   * @param {*} rule 当前表单项的校验规则
   * @param {*} value 当前表单项的值(校验它)
   * 函数体内如何校验？
   * 1. 校验通过：Promise.resolve()
   * 2. 校验失败：Promise.reject(new Error('失败错误提示'))
   */
  const validAgree = (rule, value) => {
    // console.log(rule, value)
    if (!value) {
      return Promise.reject(new Error('请同意用户协议！'))
    }
    return Promise.resolve()
  }
  return (
    <div className="login">
      <Card className="login-container">
        {/* 极客园logo */}
        <img className="login-logo" src={logo} alt="" />
        {/* 登录表单 */}
        <Form
          // 通过validateTrigger指定什么时间触发校验
          validateTrigger={['onBlur', 'onChange']}
          // 初始化表单数据的默认值
          initialValues={{
            // 属性名和Form.Item的name属性对应
            //username: 'admin',
            mobile: '13911111111',
            code: '246810',
            agree: true
          }}
          onFinish={onFinish}
          autoComplete="off"
        >
          {/* 手机号 */}
          {/* 表单校验的核心：
           1. Form.Item指定name属性，name属性和后台登录接口需要的参数名保持一致（必须）
           2. 通过rules指定表单项校验规则
          */}
          <Form.Item
            name="mobile"
            rules={[
              {
                required: true,
                message: '请输入手机号'
              },
              {
                pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
                message: '请输入正确格式的手机号'
              }
            ]}
          >
            <Input placeholder="请输入手机号" size="large" />
          </Form.Item>
          {/* code */}
          <Form.Item
            name="code"
            rules={[
              {
                required: true,
                message: '请输入验证码'
              },
              {
                len: 6,
                message: '请输入正确位数的验证码'
              }
            ]}
          >
            {/* <Input.Password size="large" /> */}
            <Input placeholder="请输入验证码" size="large" />
          </Form.Item>
          {/* 协议选择框 */}
          <Form.Item
            name="agree"
            valuePropName="checked"
            rules={[
              {
                validator: validAgree
              }
            ]}
          >
            <Checkbox>我已阅读并同意「用户协议」和「隐私条款」</Checkbox>
          </Form.Item>
          {/* 登录按钮 */}
          <Form.Item>
            {/* block === block={true} */}
            {/* htmlType="submit" 表单提交 */}
            <Button size="large" block type="primary" htmlType="submit">
              登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

export default Login
